{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
图灵课程 - 义诊预约
{% endblock %}

{% block style %}
<link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
{% endblock %}

{% block content %}

<div class="container" id="appointment" align="center" >
	<h3 class="transition_appointment">活动详情</h3><br />
	<div class="detail">
		<h4 class=""> 活动内容：清洁、重装系统、装软件、配环境</h4>
		<!--
		<div>
			<span class="glyphicon glyphicon-edit"></span>
			<p>
				<span style="color: #930000;">计算机系硕士2016级支部：</span>修电脑、清洁、重装系统、装软件、配环境、各种疑难杂症。
			</p>
		</div>
		 -->
		<div>
			<span class="glyphicon glyphicon-edit"></span>
			<p style="font-size: 15px;line-height:160%;">
				<span style="color: #930000;">关于【清灰】</span>根据第一阶段的义诊情况，清灰的需求量比较大，而且是一项比较耗时且具有挑战性的工作。根据了解，在电脑店清灰一次需要30-50RMB，可见是一件具有挑战性的工作。根据团队的商讨，我们制定了最终的方案：“有需求的同学们先在网上预约，我们会根据网上预约的情况与你们取得联系，对于清灰的需求，我们采用线下互相找个方便的时间，然后集中清灰，我们会有2-3名志愿者到场进行现场清灰”。此外，为了满足广大师生的需求，下一步，我们将打算跟企业合作，如果顺利的话，到时候的清灰工作将有专门的技术人员支持（有意愿学习的同学，我们也可以举办相关的培训），如有进一步消息，我们会通知到网上。
			</p>
			<br>
			<span class="glyphicon glyphicon-edit"></span>
			<p style="font-size: 15px;line-height:160%;">
				<span style="color: #930000;">【提倡】</span> 希望大家多多支持我们的志愿活动，如果我们真正的帮助到你们，希望你们多给我们志愿者一些鼓励，给志愿者们点个赞！你们还可以在网站的首页留言，提出一些宝贵的意见。^ ^
			</p>
		</div>
		<!--
		<div>
			<span class="glyphicon glyphicon-edit"></span>
			<p>
				<span style="color: #930000;">信息学院本科生学生会 - 图灵课堂：</span>电脑安全知识科普，敬请关注微信公众号（网站下方有二维码）。
			</p>
		</div>
		<br>
 		-->
		<h4 class=""> 活动场地：海韵学生公寓二期食堂</h4>
		<!--
		<span class="glyphicon glyphicon-map-marker"> </span><p>海韵学生公寓二期食堂（2017年3月19日-4月30日 每周日）</p><br>
		<span class="glyphicon glyphicon-map-marker"> </span><p>本部三家村广场自钦楼对面（2017年3月19日 周日）</p><br><br>
		-->

		<h4 class=""> 活动时间：2017.3.19 -- 2017.5.7，每周日下午15:30-17:30</h4>
		<!--
		<div class="timepart">
			<span class="glyphicon glyphicon-time"></span><p>  2017.3.19 15:30-17:30</p><br>
			<span class="glyphicon glyphicon-time"></span><p>  2017.3.26 15:30-17:30</p><br>
			<span class="glyphicon glyphicon-time"></span><p>  2017.4.02 15:30-17:30</p><br>
			<span class="glyphicon glyphicon-time"></span><p>  2017.4.09 15:30-17:30</p><br>
			<span class="glyphicon glyphicon-time"></span><p>  2017.4.16 15:30-17:30</p><br>
			<span class="glyphicon glyphicon-time"></span><p>  2017.4.23 15:30-17:30</p><br>
			<span class="glyphicon glyphicon-time"></span><p>  2017.4.30 15:30-17:30</p><br>
		</div>
		-->
		<h4 class=""> 主办方：计算机系硕士2016级党支部 && 信息学院本科生学生会</h4>
	</div>

	<h3 class="transition_appointment">活动公告 </h3>
	<div id="date_done" class="appointment_done">
		{% for a in AvailableDates %}
		<ul>
			<li>活动简介：{{a.Abstract}}</li>
			<li>开始时间：{{a.StartTime}}</li>
			<li>结束时间：{{a.EndTime}}</li>
			{% if super %}
			<li>报名人数：{{a.Number}}</li>
			<li>人数限制：{{a.Limit}}</li>
			<li>
				<button id="{{a.DateID}}" class="deleteTime form-sumbit pull-right">删除活动</button>
				<button id="{{a.DateID}}" class="finishActivity form-sumbit pull-right">活动完成</button>
			</li>
			{% endif %}
		</ul>
		{% endfor %}
	</div>
	<div class="clear"></div>

	<h3 class="transition_appointment">我要预约</h3>
	<div id="appointment_info">

		{% if AvailableDates %}
		<table class="college">
			<tr>
				<td class="table_left">
					<span class="glyphicon glyphicon-user"></span>*姓名
				</td>
				<td class="table_right">
					<input id='StudentName' placeholder="姓名" value="{{Name}}">
				</td>
			</tr>

			<tr>
				<td class="table_left">
					<span class="glyphicon glyphicon-user"></span>*学号
				</td>
				<td class="table_right">
					<input id='StudentNum' placeholder="学号">
				</td>
			</tr>

			<tr>
				<td class="table_left">
					<span class="glyphicon glyphicon-home"></span>*学院
				</td>
				<td class="table_right">
					<select name="School" id="School" style="height:25px;">
						<option value="" style="font-size: 15px;">请选择学院...</option>
						{% for academy in academyInfo %}
						<option value="{{academy}}" style="font-size: 14px;">{{academy}}</option>
						{% endfor %}
					</select>
				</td>
			</tr>

			<tr>
				<td class="table_left">
					<span class="glyphicon glyphicon-home"></span>*活动类型
				</td>
				<td class="table_right">
					<select name="Activity" id="Activity" style="height:25px;">
						<option value="" style="font-size: 15px;">请选择活动...</option>
						{% for activity in AvailableDates %}
						<option value="{{activity.DateID}}" style="font-size: 14px;">{{activity.Abstract}}</option>
						{% endfor %}
					</select>
				</td>
			</tr>

			<tr>
				<td class="table_left">
					<span class=" 	glyphicon glyphicon-wrench"></span>*维修内容
				</td>
				<td class="table_right">
					<textarea id="content" placeholder="【电脑义诊】简要描述所需维修的内容，其他活动写【无】" maxlength="100"></textarea>
				</td>
			</tr>

			<tr>
				<td class="table_left">
					<span class="glyphicon glyphicon-comment"></span>*QQ号码
				</td>
				<td class="table_right">
					<input id='StudentQQ' placeholder="QQ号码" value="{{UserQQ}}">
				</td>
			</tr>

			<tr>
				<td class="table_left">
					<span class="glyphicon glyphicon-phone"></span>*手机号码
				</td>
				<td class="table_right">
					<input id='StudentPhone' placeholder="手机号码" value="{{MobilePhone}}">
				</td>
			</tr>

			<tr>
				<td class="table_left">
					<span class="glyphicon glyphicon-time"></span>*预约时间
				</td>
				<td class="table_right">
					<select id="AppointmentDate" name="AppointmentDate" style="height:25px;">
						{% for date in AvailableDates %}
						<option value="{{date.DateID}}" style="font-size: 14px;">{{date.StartTime}}</option>
						{% endfor %}
					</select>
				</td>
			</tr>
		</table>
		<button id="AppointmentSubmit" class="form-sumbit" onclick="appointmentSubmit()">
			提交
		</button><br>
		{% else %}
		<label style="color: #930000;"><span class=""></span>暂无发布相关活动，请关注该网址！</label>
		{% endif %}
	</div>

	{% if AvailableDates %}
	<h3 class="transition_appointment">预约信息 - 待处理</h3>
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default" style="border: none;">
				<div class="panel-body" style="background-color: #dff0d0;border: 1px solid #fff;padding: 3px;">
					<table id="DataTable_AppointmentInfo" class="table table-bordered table-hover">
						<thead>
							<tr>
								<th width="6%;" style="text-align: center;">序号</th>
								<!-- <th width="10%;" style="text-align: center;">学号</th> -->
								<th width="8%;" style="text-align: center;">姓名</th>
								<th width="13%;" style="text-align: center;">学院</th>
								<th width="15%;" style="text-align: center;">活动简介</th>
								<th width="15%;" style="text-align: center;">维修内容</th>
								<!-- <th width="8%;" style="text-align: center;">预约次序</th> -->
								<th width="18%;" style="text-align: center;">预约时间</th>
								{% if super %}
								<th width="12%;" style="text-align: center;">操作</th>
								{% endif %}
							</tr>
						</thead>

						<tbody>
							{% for Appointment in Appointments %}
							<tr>
								<td style="text-align: center;"></td>
								<!-- <td style="text-align: center;">{{Appointment.StudentNum}}</td> -->
								<td style="text-align: center;">{{Appointment.Name}}</td>
								<td style="text-align: center;">{{Appointment.School}}</td>
								<td style="text-align: center;">{{Appointment.activityAbstract}}</td>
								<td style="text-align: center;">{{Appointment.Detail}}</td>
								<!-- <td style="text-align: center;">{{Appointment.SequenceNumber}}</td> -->
								<td style="text-align: center;">{{Appointment.AppointmentDate}}</td>
								{% if super %}
								<td style="text-align: center;"><button id="{{Appointment.StudentNum}}" class="finishAppointment btn-success">确认完成</button></td>
								{% endif %}
							</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	{% endif %}

	{% if super %}
	<h3 class="transition_appointment">预约信息 - 已完成</h3>
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default" style="border: none;">
				<div class="panel-body" style="background-color: #dff0d0;border: 1px solid #fff;padding: 3px;">
					<table id="AppointmentInfo_Completed" class="table table-bordered table-hover">
						<thead>
							<tr>
								<th width="6%;" style="text-align: center;">序号</th>
								<th width="10%;" style="text-align: center;">学号</th>
								<th width="8%;" style="text-align: center;">姓名</th>
								<th width="15%;" style="text-align: center;">学院</th>
								<th width="15%;" style="text-align: center;">活动简介</th>
								<th width="15%;" style="text-align: center;">维修内容</th>
								<!-- <th width="8%;" style="text-align: center;">预约次序</th> -->
								<th width="18%;" style="text-align: center;">预约时间</th>
							</tr>
						</thead>

						<tbody>
							{% for item in AppointmentInfo_Completed %}
							<tr>
								<td style="text-align: center;"></td>
								<td style="text-align: center;">{{item.Appointment.StudentNum}}</td>
								<td style="text-align: center;">{{item.Appointment.Name}}</td>
								<td style="text-align: center;">{{item.Appointment.School}}</td>
								<td style="text-align: center;">{{item.ActivityAbstract}}</td>
								<td style="text-align: center;">{{item.Appointment.Detail}}</td>
								<!-- <td style="text-align: center;">{{Appointment.SequenceNumber}}</td> -->
								<td style="text-align: center;">{{item.Appointment.AppointmentDate}}</td>
							</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<h3 class="transition_appointment">预约信息 - 管理员操作</h3>
	<div id="appointment_done" class="appointment_done">
		{% for a in Appointments %}
		<ul>
			<li>活动简介：{{a.activityAbstract}}</li>
			<li>学号：{{a.StudentNum}}</li>
			<li>姓名：{{a.Name}}</li>
			<li>学院：{{a.School}}</li>
			<li>预约日期：{{a.AppointmentDate}}</li>
			<li>电话号码：{{a.MobilePhone}}</li>
			<li>QQ：{{a.UserQQ}}</li>
			<!--<li>维修内容：{{a.Detail}}</li><!-->
			<li><span style="color: #930000;">队列次序：{{a.SequenceNumber}}</span></li>
			<li><button id="{{a.StudentNum}}" class="finishAppointment form-sumbit pull-right">确认完成</button></li>
		</ul>
		{% endfor %}
	</div>
	{% endif %}
	<div class="clear"></div>

	{% if super %}
	<h3 class="transition_appointment">发布活动 </h3>

	<table class="college">
		<tr>
			<td class="table_left">
				活动简介：
			</td>
			<td class="table_right_active">
				<div>
					<textarea id="activityAbstract" placeholder="简要描述活动的内容...窗口可拉长输入" maxlength="300"></textarea>
				</div>
			</td>
		</tr>
		<tr>
			<td class="table_left">
				开始时间：
			</td>
			<td class="table_right_active"><div class="input-group date form_datetime " data-date="" data-date-format="yyyy-MM-dd - HH:ii p" data-link-field="dtp_input1">
				<input id="StartTime" class="form-control" size="17" type="text" value="" readonly>
				<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
			</div>
		</td>
		</tr>
		<tr>
			<td class="table_left">
				结束时间：
			</td>
			<td class="table_right_active">
				<div class="input-group date form_datetime" data-date="" data-date-format="yyyy-MM-dd - HH:ii p" data-link-field="dtp_input1">
				<input id="EndTime" class="form-control" size="17" type="text" value="" readonly>
				<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
				</div>
			</td>
		</tr>
		<tr>
			<td class="table_left">
				人数限制：
			</td>
			<td class="table_right_active"><input id="Limit" style="height:30px" >
			</td>
		</tr>
	</table>
	<button onclick="AddTime()" id="AddTime" class="form-sumbit">添加</button>
	{% endif %}
</div>

{% endblock %}

{% block other_script %}
<script>
// 配置dataTable
// 预约模块
$(document).ready( function () {
	var DataTable_AppointmentInfo = $('#DataTable_AppointmentInfo').DataTable({
		"ordering": false,
		"bPaginate": false,
		"iDisplayLength": 10,
	});

	DataTable_AppointmentInfo.on( 'order.dt search.dt', function () {
		DataTable_AppointmentInfo.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
			cell.innerHTML = i+1;
		} );
	} ).draw();

	var AppointmentInfo_Completed = $('#AppointmentInfo_Completed').DataTable({
		"ordering": false,
		"bPaginate": false,
		"iDisplayLength": 10,
	});

	AppointmentInfo_Completed.on( 'order.dt search.dt', function () {
		AppointmentInfo_Completed.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
			cell.innerHTML = i+1;
		} );
	} ).draw();
});
</script>

<script type="text/javascript" src="/static/js/Appointment.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
	$('.form_datetime').datetimepicker({
		language:  'zh-CN',
		weekStart: 1,
		todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0
	});
</script>

{% endblock %}
